<template>
	<view class="index c0 f16 p-r" v-if="orderList">
		<view class="p20 bf mt20">
			<u-checkbox-group v-model="checkValue" placement="column" iconPlacement="right" borderBottom="true" :activeColor="subColor" @change="checkboxChange" icon-color="#000">
				<block v-for="(item, index) in orderList" :key="index">
					<u-checkbox :customStyle="{marginBottom: '18px'}" v-if="type == 'give' || type == 'urgeUp' || (type=='backFood' && item.state !=8)"
						:label="`${item.name || item.goods.name}      x${item.num}`" :name="item.id">--</u-checkbox>
				</block>
			</u-checkbox-group>
			<!-- <view class="f-bt goods p-r" v-for="(item,index) in orderList" :key="index">
					<view class="f-g-1 flex f-y-c">
						<view class="mr5">
							<checkbox :checked="item.check" />
						</view>
						<view class="f14">
							<view>{{item.goods.name}}</view>
							<view class="flex f-w f12">
								<view v-if="item.attrData && item.attrData.spec">[{{ item.attrData.spec }}]</view>
								<view v-if="item.attrData && item.attrData.attr">[{{ item.attrData.attr }}]</view>
								<view :style="{color:subColor}" v-if="item.attrData && item.attrData.matal">
									{{ item.attrData.matal }}
								</view>
							</view>
						</view>
					</view>
					<view class="f-g-0 f14">
						{{item.num}}
					</view>
				</view> -->
		</view>
		<view class="db bf f-bt p2 f-y-c">
			<view class="f12 c9">已选<text class="mlr5 cf06">{{checkValue.length}}</text>项商品</view>
			<view>
				<u-button :disabled="checkValue && !checkValue.length" text="确认" :color="subColor" @click="complete"
					:customStyle="{borderRadius:'60rpx',width:'180rpx',color:'#000'}"></u-button>
			</view>
		</view>
		<giveGoods ref="giveRef" @save="save" mode="multiple" :v="form"></giveGoods>
		<refoundGoods ref="refoundRef" @save="save" mode="multiple" :v="form"></refoundGoods>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import giveGoods from "../components/giveGoods.vue"
	import refoundGoods from "../components/refoundGoods.vue"
	export default {
		components: {
			giveGoods,
			refoundGoods,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				form: {},
				carList: {},
				orderList: [],
				checkValue: [],
				orderSn: '',
				type: 'give',
			}
		},
		async onLoad(options) {
			if (options.id) {
				this.form.id = options.id
				this.form.storeId = options.storeId
				this.form.diningType = options.diningType
				this.checkOut()
			} else if (options.orderSn) {
				this.orderSn = options.orderSn
				this.fetchData(options.orderSn)
			}
			uni.setNavigationBarTitle({
				title: '请选择赠菜的商品'
			});
			if (options && options.type) {
				this.type = options.type
				if (this.type == 'give') {
					uni.setNavigationBarTitle({
						title: '请选择赠菜的商品'
					});
				} else if (this.type == 'backFood') {
					uni.setNavigationBarTitle({
						title: '退菜'
					});
				}else if (this.type == 'urgeUp') {
					uni.setNavigationBarTitle({
						title: '催菜'
					});
				}
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			async fetchData(id) {
				let {
					data
				} = await this.beg.request({
					url: `${this.api.inStoreOrder}/${id}`,
					data: {
						storeId: this.storeId
					},
				})
				this.form = data
				this.form.id = data.tableId
				this.orderList = data.generalGoods && data.generalGoods.length ? data.generalGoods : []
			},
			async checkOut() {
				let {
					data
				} = await this.beg.request({
					url: this.api.checkout,
					// method: 'POST',
					data: {
						diningType: this.form.diningType,
						storeId: this.form.storeId,
						tableId: this.form.id,
					}
				})
				this.orderList = data.generalGoods ? data.generalGoods : []
			},
			checkboxChange(n) {
				console.log('change', n);
				this.checkValue = n
			},
			async complete() {
				if (this.type == 'give') {
					this.$refs['giveRef'].open()
				}else if(this.type == 'backFood'){
					this.$refs['refoundRef'].open()
				}else if(this.type == 'urgeUp'){
					uni.showModal({
						title: '温馨提示',
						content: '确定催起吗',
						success: async (res) => {
							this.save()
						}
					});
				}
			},
			async save(reason) {
				let goods = []
				this.orderList.forEach((v) => {
					if (this.checkValue.includes(v.id)) {
						goods.push({
							id: v.id,
							num: v.num
						})
					}
				})
				let {
					data,
					msg
				} = await this.beg.request({
					url: this.orderSn ? `${this.api.giveOrder}/${this.orderSn}` : this.api.give,
					method: 'POST',
					data: {
						goods,
						reason,
						type: this.type,
						diningType: this.form.diningType,
						storeId: this.form.storeId,
						tableId: this.form.id,
					}
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				if (data) {
					this.close()
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)
				}
			},
			close() {
				if (this.type == 'give') {
					this.$refs['giveRef'].close()
				}else if(this.type == 'backFood'){
					this.$refs['refoundRef'].close()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.w65 {
		width: 60%;
	}

	.goods {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.db {
		position: fixed;
		bottom: 24rpx;
		width: 100%;
		border-top: 2rpx solid #ccc;
	}
</style>